
<template>
<div class="body-brand">
<!--  查询-->
  <div class="search-brand">
    <el-form :inline="true"   class="demo-form-inline">
      <el-form-item label="品牌名称" >
        <el-input  size="mini" v-model="searchForm.brandName" placeholder="品牌名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
            v-model="value2"
            type="datetimerange"
            align="left"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="timeChange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success"  size="mini" @click="selectBrand">查询</el-button>
        <el-button type="primary"  size="mini" @click="reseBrand">重置</el-button>
      </el-form-item>
    </el-form>

  </div>

<!--  操作-->
<div class="exeo-brand">
  <el-button type="success" icon="el-icon-share" @click="dialogVisible=true">新建</el-button>
  <el-button type="primary" icon="el-icon-edit" :disabled="ids.length!=1" @click="searchById(ids[0]),dialogVisible=true">编辑</el-button>
  <el-button type="warning" icon="el-icon-delete" :disabled="ids.length==0" @click="delsBrand">批量删除</el-button>
</div>

<!--  列表-->
 <div class="tb-brand">
   <el-table
       @selection-change="selectChang"
      
       :data="tableData"
       ref="table"
       tooltip-effect="dark"
       style="width: 100%"
       >
     <el-table-column
         type="selection"
         align="center"
         width="55">
     </el-table-column>
     <el-table-column
         prop="id"
         label="品牌id"
         align="center"
         >
     </el-table-column>
     <el-table-column
         prop="brandName"
         label="品牌名称"
         align="center"
         >
     </el-table-column>
     <el-table-column

         align="center"
         label="品牌网址"

     >
       <template v-slot="obj">
         <a :href="obj.row.brandUrl" target="_blank">{{obj.row.brandName+"站点"}}</a>

       </template>
     </el-table-column>
     <el-table-column
         prop="brandDesc"
         align="center"
         label="品牌描述"
         show-overflow-tooltip>
     </el-table-column>
     <el-table-column

         align="center"
         label="品牌logo"
         show-overflow-tooltip>
       <template v-slot="obj">
         <img :src="obj.row.brandLogo" width="150px" height="100px">
       </template>
     </el-table-column>
     <el-table-column
         label="操作"
         align="center"
         v-slot="obj"
         show-overflow-tooltip>
       <el-button type="success"  size="mini" icon="el-icon-edit"  @click="searchById(obj.row.id),dialogVisible=true" style="margin-right: 2px;"></el-button>



           <el-popconfirm
               confirm-button-text='好的'
               cancel-button-text='不用了'
               @confirm="delBrand"
               icon="el-icon-info"
               icon-color="red"
               title="这是一段内容确定删除吗？"
           >
             <el-button type="primary"  slot="reference" size="mini" icon="el-icon-delete"  @click="getId(obj.row.id) "></el-button>
           </el-popconfirm>


     </el-table-column>
   </el-table>

 </div>

<!--  分页-->
  <div class="page-brand">
    <el-pagination
        background
        :current-page="searchForm.currentPage"
        :page-size="searchForm.size"
        align="center"
        @current-change="changePage"
        layout="prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
<!--  弹窗-->
  <div class="popbrand">

    <el-dialog
        title="新建"
        :visible.sync="dialogVisible"
        width="30%"
        >
      <el-form ref="form" :model="formDate" label-width="80px">
        <el-form-item label="品牌名称">
          <el-input size="mini" v-model="formDate.brandName"></el-input>
        </el-form-item>
        <el-form-item label="品牌网址">
          <el-input size="mini" v-model="formDate.brandUrl"></el-input>
        </el-form-item>
        <el-form-item label="品牌描述">
          <el-input size="mini" v-model="formDate.brandDesc"></el-input>
        </el-form-item>
        <el-form-item label="品牌logo">
          <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="brandImgBase">
            <img v-if="formDate.brandLogo" :src="formDate.brandLogo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      </el-form>

    <el-button  size="mini" @click="dialogVisible = false, formDate={}">取 消</el-button>
    <el-button size="mini" type="primary" @click="dialogVisible = false, addOrUpdate(),formDate={}">确 定</el-button>

    </el-dialog>
  </div>


</div>
</template>

<script src="./brand.js">

</script>

<style src="./brand.scss" lang="scss">

</style>